<template>
  <t-dialog
    :width="width ? width : '50%'"
    :visible="showDialog"
    @confirm="handleConfirm"
    @close="handleCancel"
    @cancel="handleCancel"
    preventScrollThrough
    placement="center"
  >
    <template #header>{{ mode == "new" ? "新增" : mode == "edit" ? "编辑" : mode == "view" ? "查看" : "" }} </template>
    <t-form ref="formInstance" :data="pageData.formData" :rules="pageData.formRules" :disabled="pageData.readOnly">
      <t-form-item label="开户行" name="openingBank">
        <t-input :showLimitNumber="true" v-model="pageData.formData.openingBank" maxlength="100" />
      </t-form-item>
      <t-form-item label="开户行账户" name="openingBankAccount">
        <t-input :showLimitNumber="true" v-model="pageData.formData.openingBankAccount" maxlength="100" />
      </t-form-item>
      <t-form-item label="银行中国联行号" name="interBank">
        <t-input :showLimitNumber="true" v-model="pageData.formData.interBankNo" maxlength="100" />
      </t-form-item>
      <t-form-item label="银行地址" name="bankAddress">
        <t-input :showLimitNumber="true" v-model="pageData.formData.bankAddress" maxlength="100" />
      </t-form-item>
      <t-form-item label="银行 Swift" name="bankSwiftNo">
        <t-input :showLimitNumber="true" v-model="pageData.formData.bankSwiftNo" maxlength="100" />
      </t-form-item>
      <t-form-item label="所属国家省市" name="country">
        <t-input :showLimitNumber="true" v-model="pageData.formData.country" maxlength="100" />
      </t-form-item>
      <t-form-item label="账户货币" name="currencies">
        <t-input :showLimitNumber="true" v-model="pageData.formData.currencies" maxlength="100" />
      </t-form-item>
      <t-form-item label="设为默认" name="defaultAccount">
        <t-switch v-model="pageData.formData.defaultAccount" size="large">
          <template #label="slotProps">{{ slotProps.value ? "是" : "否" }}</template>
        </t-switch>
      </t-form-item>
    </t-form>
  </t-dialog>
</template>

<script lang="tsx" setup>
// 框架和组件库
import { reactive, ref, toRaw } from "vue";
import type { FormInstanceFunctions } from "tdesign-vue-next";

const props = defineProps(["width", "showDialog", "mode", "editFormData"]);
const emits = defineEmits(["onCancel", "onConfirm"]);

const formInstance = ref<FormInstanceFunctions | null>(null);

const pageData = reactive<Record<string, any>>({
  readOnly: false,
  formData: {
    id: "",
    localUUID: "",
    status: 0,
    hasDeleted: 0,
    remark: "",
    openingBank: "",
    openingBankAccount: "",
    bankAddress: "",
    bankSwiftNo: "",
    country: "",
    currencies: "",
    interBankNo: "",
    defaultAccount: false
  },
  formRules: {
    openingBankAccount: [{ required: true, message: "请输入开户行账户", type: "error", trigger: "blur" }],
    openingBank: [{ required: true, message: "请输入开户行", type: "error", trigger: "blur" }]
  }
});
const handleCancel = () => {
  emits("onCancel");
};

const handleConfirm = () => {
  emits("onConfirm", toRaw(pageData.formData));
};

if (props.editFormData) {
  pageData.formData = toRaw(props.editFormData);
}
</script>
